XHTML-এ, HTML-এর মতোই দুটি প্রধান ধরনের এলিমেন্ট থাকে: ব্লক এলিমেন্ট (Block Elements) এবং ইনলাইন এলিমেন্ট (Inline Elements)। প্রতিটি এলিমেন্টের ভূমিকা এবং প্রদর্শন প্রক্রিয়া আলাদা, যা ওয়েব পেজের গঠন এবং ডিজাইনে প্রভাব ফেলে। ব্লক এবং ইনলাইন এলিমেন্ট সম্পর্কে ভালোভাবে বুঝলে, আপনি XHTML ডকুমেন্টের গঠনকে আরও কার্যকরীভাবে সাজাতে পারবেন।
১. ব্লক এলিমেন্ট (Block Elements)
ব্লক এলিমেন্টস হলো সেই এলিমেন্টস, যেগুলো সাধারণত নতুন লাইনে শুরু হয় এবং পুরো প্রস্থে (full width) প্রসারিত হয়ে থাকে। এগুলোর মধ্যে অনেকগুলি উপাদান থাকে, যেমন টেক্সট, ছবি, তালিকা ইত্যাদি। ব্লক এলিমেন্টগুলো সাধারণত একে অপরের উপরে উপরে রাখা হয়।
১.1 ব্লক এলিমেন্টের বৈশিষ্ট্য
- ব্লক এলিমেন্ট একটি নতুন লাইন থেকে শুরু হয় এবং সম্পূর্ণ প্রস্থ দখল করে।
- এটি পরবর্তী উপাদানগুলির উপরে বা নিচে থাকে, অর্থাৎ, এটি "ব্লক" আকারে থাকে।
- সাধারণত ব্লক এলিমেন্টগুলোর মধ্যে অন্যান্য ব্লক বা ইনলাইন এলিমেন্ট থাকতে পারে।
১.2 ব্লক এলিমেন্টের উদাহরণ
<div>: সাধারণ ব্লক কনটেইনার।<p>: প্যারাগ্রাফ, টেক্সটের জন্য ব্যবহৃত।<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: হেডিং ট্যাগগুলো।<ul>,<ol>: অর্ডারড এবং আনঅর্ডারড লিস্ট।<table>: টেবিল।
১.3 ব্লক এলিমেন্টের উদাহরণ কোড
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Block Elements Example</title>
</head>
<body>
<h1>Welcome to XHTML</h1>
<p>This is a paragraph. It is a block element and takes up the full width of the page.</p>
<div>
<h2>Subheading Inside a div</h2>
<p>This paragraph is inside a block-level div element.</p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
২. ইনলাইন এলিমেন্ট (Inline Elements)
ইনলাইন এলিমেন্টস সাধারণত একটি নির্দিষ্ট প্রস্থ নিয়ে থাকে এবং সেগুলো একই লাইনে থাকে, যেখানে তারা সন্নিবেশিত হয়। এটি সাধারণত ব্লক এলিমেন্টের ভিতরে ব্যবহৃত হয় এবং একে অপরের পাশে থাকে।
২.1 ইনলাইন এলিমেন্টের বৈশিষ্ট্য
- ইনলাইন এলিমেন্টগুলি একটি লাইনের মধ্যে অবস্থান করে, তাই তারা ব্লক এলিমেন্টের তুলনায় কম জায়গা দখল করে।
- এটি পরবর্তী এলিমেন্টগুলির সাথে একই লাইনে থাকে, যেমন টেক্সটের মধ্যে লিঙ্ক বা বোল্ড টেক্সট।
- ইনলাইন এলিমেন্ট সাধারণত ব্লক এলিমেন্টের মধ্যে ব্যবহৃত হয়, কিন্তু একটি ইনলাইন এলিমেন্ট অন্য ইনলাইন এলিমেন্টের মধ্যে থাকতে পারে।
২.2 ইনলাইন এলিমেন্টের উদাহরণ
<a>: লিঙ্ক (Anchor Tag)<span>: ছোট অংশে স্টাইল প্রয়োগ করার জন্য ব্যবহৃত।<strong>,<em>: বোল্ড এবং ইটালিক টেক্সট।<img>: ছবি (Image)।<br>: লাইনের ব্রেক (Line Break)।
২.3 ইনলাইন এলিমেন্টের উদাহরণ কোড
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Inline Elements Example</title>
</head>
<body>
<p>This is a <strong>strong</strong> word in a sentence.</p>
<p>Visit <a href="https://www.example.com">this link</a> for more information.</p>
<p>Inline images can be inserted like this: <img src="image.jpg" alt="Image" /> in the text.</p>
</body>
</html>
৩. ব্লক এবং ইনলাইন এলিমেন্টের পার্থক্য
| বৈশিষ্ট্য | ব্লক এলিমেন্ট | ইনলাইন এলিমেন্ট |
|---|---|---|
| লাইন ব্রেক | নতুন লাইনে শুরু হয় | একই লাইনে থাকে |
| প্রস্থ দখল | সম্পূর্ণ প্রস্থ দখল করে | প্রয়োজনীয় পরিমাণ জায়গা দখল করে |
| উপাদান সংখ্যা | অন্যান্য ব্লক এলিমেন্ট বা ইনলাইন এলিমেন্ট থাকতে পারে | সাধারণত অন্য ইনলাইন এলিমেন্টের সাথে থাকে |
| প্রধান উদাহরণ | <div>, <p>, <h1> | <a>, <span>, <img> |
৪. ব্লক এবং ইনলাইন এলিমেন্টের সংমিশ্রণ
ব্লক এবং ইনলাইন এলিমেন্ট একসাথে ব্যবহৃত হতে পারে, এবং একে অপরের মধ্যে সন্নিবেশিত থাকতে পারে। যেমন, আপনি একটি ব্লক এলিমেন্টে ইনলাইন এলিমেন্টগুলি ব্যবহার করতে পারেন, কিন্তু ইনলাইন এলিমেন্টগুলো ব্লক এলিমেন্টের বাইরে ব্যবহার করা যাবে না।
উদাহরণ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Block and Inline Elements Together</title>
</head>
<body>
<div>
<h2>Welcome to Our Site</h2>
<p>This is a <strong>paragraph</strong> that contains <em>inline</em> elements like <span>span</span> and <a href="#">links</a>.</p>
</div>
</body>
</html>
XHTML ডকুমেন্টে ব্লক এবং ইনলাইন এলিমেন্টের ব্যবহারে মৌলিক পার্থক্য রয়েছে। ব্লক এলিমেন্টগুলি সম্পূর্ণ প্রস্থ দখল করে এবং নতুন লাইনে শুরু হয়, যখন ইনলাইন এলিমেন্টগুলি এক লাইনে থাকে এবং প্রস্থ অনুযায়ী সীমাবদ্ধ থাকে। সঠিক এলিমেন্টের ব্যবহার আপনার ওয়েব পেজের গঠন এবং ডিজাইনকে আরো কার্যকরী ও সুন্দর করে তোলে।
Read more
